<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>人脸检测门禁系统</title>
    <link rel="shortcut icon" href="/static/images/favicon.ico">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.css">
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    {#
    <script src="/static/js/bootstrap.min.js"></script>
    #}
    <script src="/static/js/bootstrap.js"></script>
    <script src="/static/js/bootstrap-table.js"></script>
    <script src="/static/js/bootstrap-table-zh-CN.js"></script>
    <style>
        .row {
            margin: 100px
        }

    </style>

</head>
<body>
<div class="row">
    <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group" name="toolbar1">
        <!--<button type="button" class="btn btn-outline btn-default" data-toggle="modal" data-target="#myModal">
            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
        </button>-->
        <button type="button" class="btn btn-outline btn-default" data-toggle="modal" onclick="fnEditRoom()">
            <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-outline btn-default" data-toggle="modal" data-target="#delModal">
            <i class="glyphicon glyphicon-warning-sign" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-outline btn-default" onclick="fnRanking()">
            <i class="glyphicon glyphicon-flag" aria-hidden="true"></i>
        </button>
    </div>
    <table data-toggle="table" data-url="/users" data-show-refresh="true" data-show-toggle="true"
           data-show-columns="true"
           data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name"
           data-sort-order="desc">
        <thead>
        <tr>
            <th data-field="statue" data-radio="true">Item ID</th>
            <th data-field="id">ID</th>
            <th data-field="school_id" data-sortable="true">学号 ID</th>
            <th data-field="viewname" data-sortable="true">姓名</th>
            <th data-field="department" data-sortable="true">系别</th>
            <th data-field="profession" data-sortable="true">专业</th>
        </tr>
        </thead>
    </table>

    <!--/.row-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                    <h4 class="modal-title" id="myModalLabel">添加房间</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">学号</label>
                        <input type="text" class="form-control" id="school-id" placeholder="请输入名称">
                    </div>

                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入名称">
                    </div>

                    <div class="form-group">
                        <label for="name">部门</label>
                        <input type="text" class="form-control" id="department" placeholder="请输入名称">
                    </div>

                    <div class="form-group">
                        <label for="name">专业</label>
                        <input type="text" class="form-control" id="profession" placeholder="请输入名称">
                    </div>

                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsSex" value="0" checked>
                            男
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsSex" value="1">
                            女
                        </label>
                    </div>

                    <div class="form-group">
                        <input type="checkbox" id="is-active"></input>
                        <label for="name">启用</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="fnAddRoom()">新建</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                    <h4 class="modal-title" id="editModalLabel">修改信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="edit-name" placeholder="请输入名称">
                    </div>

                    <div class="form-group">
                        <label for="name">部门</label>
                        <input type="text" class="form-control" id="edit-department" placeholder="请输入部门">
                    </div>

                    <div class="form-group">
                        <label for="name">专业</label>
                        <input type="text" class="form-control" id="edit-profession" placeholder="请输入专业">
                    </div>

                    <div class="form-group">
                        <label for="name">学号</label>
                        <input type="text" class="form-control" id="edit-schooldid" placeholder="请输入学号">
                    </div>

                    <div class="radio">
                        <label>
                            <input type="radio" name="edit-optionsSex" id="edit-optionsRadios1" value="option1" checked>
                            男
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="edit-optionsSex" id="edit-optionsRadios2" value="option2">
                            女
                        </label>
                    </div>

                    <div class="form-group">
                        <input type="checkbox" id="edit-is-active"/>
                        <label for="name">是否启动</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="fnSaveRoom()">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                    <h4 class="modal-title" id="delModalLabel">添加房间</h4>
                </div>
                <div class="modal-body">
                    <p>是否要删除此用户</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="fnDelRoom()">删除</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<script>
    function fnRanking() {
        window.location.href = "/attendces";
    }

    function fnOpenRoom() {
        var oSelect = $('.table').bootstrapTable('getSelections');
        if (oSelect.length == 1) {
            window.location.href = "/openRoom/" + oSelect[0].id;
        } else {
            alert("请选中一行");
            return;
        }
    }

    function fnEditRoom() {
        var oSelect = $('.table').bootstrapTable('getSelections')[0];
        console.log(oSelect);
        var id = oSelect.id;
        $("#edit-name").val(oSelect.viewname);
        $("#edit-department").val(oSelect.department);
        $("#edit-profession").val(oSelect.profession);
        $("input[name='edit-optionsSex']").val(oSelect.sex);
        $("#edit-is-active").prop("checked", (oSelect.is_active == 1));
        $("#edit-schooldid").val(oSelect.school_id);
        $("#editModal").modal("show")
    }

    function fnSaveRoom() {
        var oSelect = $('.table').bootstrapTable('getSelections');
        console.log(oSelect.id);
        reqdata = {
            "id": oSelect[0].id,
            "viewname": $("#edit-name").val(),
            "department": $("#edit-department").val(),
            "school_id": $("#edit-schooldid").val(),
            "profession": $("#edit-profession").val(),
            "sex": $("input[name='edit-optionsSex']").val(),
            "is_active": ($("#edit-is-active").val() == "on"),
        };
        $.ajax({
            url: "/saveUser",
            dataType: "json",
            data: reqdata,
            type: "get",
            success: function (recv) {
                alert("");
            }
        })
    }
    
    function fnDelRoom() {
        var oSelect = $('.table').bootstrapTable('getSelections');
        console.log(oSelect.id);
        reqdata = {
            "id": oSelect[0].id,
        };
        $.ajax({
            url: "/delUser",
            dataType: "json",
            data: reqdata,
            type: "get",
            success: function (recv) {
                alert("");
            }
        })
    }

    function fnAddRoom() {
        var sName = "";
        sName = document.getElementById("name").value;
        var oRadio1 = document.getElementById("optionsRadios1")
        var oType = 1;
        if (oRadio1.checked) {
            oType = 1;
        } else {
            oType = 2;
        }
        console.log(sName, oType);
        $.ajax({
            data: {
                name: sName,
                sex: $("input[name='optionsSex']").val(),
                school_id: $("#school-id").val(),
                department: $("#department").val(),
                profession: $("#profession").val(),
                is_active: $("#is-active").val()
            },
            dataType: "json",
            url: "/addUser",
            type: "get",
            success: function (dat) {
                window.location.href = "/openRoom/" + dat["key"];
            }, error: function (o, e) {
                alert(e);
            }
        })
    }
</script>
</body>

</html>